<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>云引擎</title>
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css"/>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <link rel="stylesheet" href="css/animate.min.css" type="text/css"/>
    <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css"/>
    <style type="text/css">
.fakeloader{position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 999;background-image: url(../bgAll/img/bg.png);}
    </style>
</head>
<body class="wrap">
<div class="fakeloader"></div>
<!-- Meteor Start -->
<div class="mod-star-list">
    <div class="inner">
    </div>
</div>
<!-- Meteor End -->
<!-- header Start -->
<div id="header-zw" class="clearfix hide" style="position:absolute;margin-left:10px;z-index:100;">
    <div class="header-left-zw">
        <a href="../ODPS/index.html" class="clearfix">
            <div class="bg-next rotate5 btn"></div>
            <p>浏览下一个产品</p>
        </a>
    </div>
    <div class="header-right-zw">
        <div class="header-open-zw">云引擎<p>AliCloud Engine</p></div>
    </div>
</div>
<!-- header End -->
<!-- nav Start -->
<nav class="hide">
    <aside>
        <img src="img/navbar-bg.png" class="nav_line">
        <ul class="nav_ecs">
            <li class="nav_shili" id="shili">
                <span class="shili_nolight "></span>
                <span class="shili_light nav_icon_light hide"></span>
                <img src="img/navbar-circle2.png">
                <label>智能弹性扩容</label>
            </li>
            <li class="nav_cipan cipan1" id="cipan">
                <span class="cipan_nolight "></span>
                <span class="cipan_light nav_icon_light"></span>
                <img class="rotate" src="img/navbar-circle2.png">
                <label>主动安全立体防护</label>

            </li>
            <li class="nav_photo" id="photo">
                <span class="photo_nolight "></span>
                <span class="photo_light nav_icon_light"></span>
                <img class="rotate" src="img/navbar-circle2.png">
                <label style="margin-left: 9px;width: 92px;margin-top: 7px;">管家式运维服务</label>
            </li>
            <li class="nav_area" id="area">
                <span class="area_nolight "></span>
                <span class="area_light nav_icon_light"></span>
                <img class="rotate" src="img/navbar-circle2.png">
                <label>最合理收费方式</label>
            </li>
        </ul>
    </aside>
</nav>
<!-- nav End -->
<!-- main Start -->
<div class="main">
    <section id="chart" style="display: block">
        <div class="canvas1"></div>
        <div class="canvas2 hide"></div>
        <div class="canvas3 hide"></div>
        <div class="canvas4 hide"></div>
        <div class="canvas5 hide"></div>
        <div class="canvas6 hide"></div>
        <div class="canvas7 hide"></div>
        <div class="canvas8 hide"></div>
    </section>
    <section id="dataStream" style="display: none">
        <div class="number-center">
            <p><span style="top:24px">网络</span><span style="top:18px">接入层</span><span style="top:12px">系统</span><span style="top:6px">资源隔离</span> <span>语言沙箱</span></p>
        </div>
        <div class="marquee-center" >
            <marquee style="color:rgba(228, 116, 97, 1); text-shadow:rgba(199, 47, 36,0.45) 0 0 5px;margin-left: 21px;margin-bottom:10px; display: block; font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="17" width="400";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;nomargin-bottom:10px;  margin-left:20px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="20" width="350";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px;  display: block;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="19" width="400";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px;  margin-left:20px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="15" width="350";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px; display: block;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="22" width="400";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px;  margin-left:20px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="18" width="350";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px;  display: block;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="20" width="400";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(175, 205, 245,1); text-shadow: rgba(33, 53, 141,0.45) 0 0 5px;margin-bottom:10px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="23" width="350";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>

        </div>
        <div class="left-number">
            <marquee style="color:rgba(228, 116, 97, 1); text-shadow: rgba(199, 47, 36,.45) 0 0 5px; display: block;margin-bottom:10px;    margin-left: 52px;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="20" width="400";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:rgba(228, 116, 97, 1); text-shadow: rgba(199, 47, 36,.45) 0 0 5px;margin-bottom:10px;  margin-left:20px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="23" width="350";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
        </div>
        <div class="left-out">
            <marquee style="color:rgba(228, 116, 97,1); text-shadow: rgba(199, 47, 36,.45) 0 0 5px;position:absolute;top:-56px;left:0;display: none;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="15" width="100";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="display:none; color:rgba(228, 116, 97,1); text-shadow: rgba(199, 47, 36,.45) 0 0 5px;position:absolute;top:-44px;left:49px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="18" width="100";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="display:none; color:rgba(228, 116, 97,.45); text-shadow: #c72f24 0 0 5px;position:absolute;top:-21px;left:112px;font-size: 8px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="18" width="100";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
        </div>
    </section>
    <section id="housekeeper" style="display: none">
        <div class="content">
            <div class="error"></div>
            <div id="element_id">
                <ul class="clearfix">
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                    <li>
                        <div></div>
                        <div class="example"></div>
                        <div class="trash"></div>
                        <div class="transfer">
                            <p>应用迁移</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bg-belt"></div>
            <div class="roller">
                <div class="sm-roller1 rotate5"></div>
                <div class="sm-roller2 rotate5"></div>
                <div class="sm-roller3 rotate5"></div>
                <div class="sm-roller4 rotate5"></div>
                <div class="sm-roller5 rotate5"></div>
                <div class="sm-roller6 rotate5"></div>
            </div>
            <div class="main-info">
                <p><span>【实时应用级监控】 &nbsp;&nbsp;</span>系统级监控：CPU、Memory、Network等；语言级监控：JVM。</p>
                <p><span>【实时应用级日志采集】&nbsp;&nbsp;</span>实时日志查询、实时日志分析及异常日志报警。</p>
            </div>
        </div>

    </section>
    <section id="question" style="display: none">
        <div class="question">
            <div class="problems">您觉得阿里云产品一定很<span>贵</span>吧？</div>
            <div class="answer-box">
                <div class="answer yes"><p>YES</p></div>
                <div class="slash"></div>
                <div class="answer no" style="background-color: rgba(72,67,182,.5)"><p>NO</p></div>
            </div>
        </div>
        <div class="no hide">
            <div class="line-chart">
                <div class="wrong hide"></div>
            </div>
            <div class=robot-box><div class="robot hide"></div></div>
            <div class="more-info">
                <p class="hide">“哈哈，您答错啦，我们的收费不仅不贵，而且会提供<span>按使用量付费</span>和<span>包年包月</span>两种付费方式供您选择，百分百合理哦！”</p>
            </div>
            <div class="again hide shineAction"><a href="###">再答一次</a></div>
        </div>
        <div class="yes hide">
            <div class="thank">
                <h3>感谢您</h3>
                <p>对云引擎（AliCloud Engine）产品的大力支持</p>
            </div>
            <div class="robot"></div>
            <div class="more-info">
                <p>“恭喜您，答对啦！我们的收费不仅不贵，而且会提供<span>按使用量付费</span>和<span>包年包月</span>两种付费方式供您选择，百分百合理哦！”</p>
            </div>
            <div class="more-info-1">
                <ul>
                    <li><p>即将上线：</p></li>
                    <li><p><span>a)</span>支持根据应用日志异常关键词进行监控报警</p></li>
                    <li><p><span>b)</span>支持一键开启CDN加速</p></li>
                    <li><p><span>c)</span>支持青岛、深圳地域的应用部署</p></li>
                </ul>
            </div>
        </div>
    </section>
</div>
<!-- main End -->

<footer id="footer-zw" class="clearfix">
    <div class="footer-left-zw fl">
        <a href="index.html" class="back-zw"></a>
        <a href="index.html" class="back-zw2"></a>
        <p><a href="index.html">返回产品首页</a></p>
    </div>
    <div class="footer-right-zw fr">
        <a href="" class="refresh-zw"></a>
        <a href="" class="refresh-zw2"></a>
        <p><a href="../index/index.html">刷新</a></p>
    </div>
</footer>

</body>

<script type="text/javascript"  src='../bgAll/js/jquery-1.11.1.min.js'></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript">
//可放置加载动画
/**/$(document).ready(function(){
    $(".fakeloader").fakeLoader({
        timeToHide: 1000,
        bgColor:"transparent",
        spinner:"spinner5"
    });
    window.setTimeout(function  () {
        $("nav").show();
        $("#header-zw").show()
    },100)
});
</script>
<script type="text/javascript"  src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript"  src='../bgAll/js/star.js'></script>
<script src="js/jquery.kxbdmarquee.js"></script>
<script src="js/index.js"></script>
</html>